<template>
  <div class="m-full-screen-container" >
    <div ref="domRef" class="inner">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onBeforeUnmount, onMounted, ref} from "vue";
// ref 是一个用于获取组件实例或元素引用的属性
const mounted = ref<boolean>(true) // 创建了一个名为 mounted 的响应式布尔值状态。初始值为 true
const domRef = ref<HTMLElement>()  // 创建了一个名为 domRef 的响应式 HTML 元素引用状态

const autoResizeScreen = ()=>{
  // const { width, height } = window.screen
  const { clientWidth, clientHeight } = document.body
  var width = 1920,
      height = 1080;
  let left; let top; let scale;
  // 获取比例  可视化区域的宽高比与 屏幕的宽高比  来进行对应屏幕的缩放

  // 用于计算和设置元素的缩放比例和位置，以适应不同的窗口大小\
  // 它根据窗口的宽度和高度来确定元素的缩放比例和位置
  if (clientWidth / clientHeight > width / height) {
    scale = clientHeight / height;
    top = 0;
    left = (clientWidth - width * scale) / 2;
  } else {
    scale = clientWidth / width;
    left = 0;
    top = (clientHeight - height * scale) / 2;
  }
  // 防止组件销毁后还执行设置状态s
  // Object.assign() 方法相当于合并对象。
  // 它接受一个目标对象和一个或多个源对象作为参数，并将源对象的属性逐个复制到目标对象中。
  // 如果目标对象已经存在同名属性，则会覆盖目标对象的属性
  if(mounted.value){
    Object.assign(domRef.value.style, {
      transform: `scale(${scale})`,
      left: `${left}px`,
      top: `${top}px`,
    })
  }
}
// 这个钩子函数在组件已经创建并挂载到 DOM 之后被调用
onMounted(()=>{
  mounted.value=true
  autoResizeScreen()
  window.addEventListener('resize',autoResizeScreen )
})
// 这个钩子函数在组件即将被销毁之前被调用
onBeforeUnmount(()=>{
  mounted.value=false
  window.removeEventListener('resize', autoResizeScreen)
})
</script>

<style lang="scss" scoped>

.m-full-screen-container{
    background-color: #030409;
    width: 100vw;
    height: 100vh;
  .inner{
    overflow: hidden;
    transform-origin: left top; // 用于指定元素的变形原点（transform origin）。它的值为 left top，表示变形原点位于元素的左上角
    z-index: 999;
    position: fixed;
    transition: all 0.3s; // 用于指定元素的过渡效果。它的值为 all 0.3s，表示过渡效果将应用于所有属性，并且过渡时间为 0.3 秒
  }
}
</style>
